<template>
  <div>
    <!-- 不使用 value-key -->
    <!-- <el-select v-model="bindValue" placeholder="请选择城市">
      <el-option-group v-for="group in cityList" :key="group.label" :label="group.label">
        <el-option
          v-for="item in group.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-option-group>
    </el-select> -->

    <!-- 使用 value-key -->
    <el-select v-model="bindValue" placeholder="请选择" value-key="label">
      <el-option-group v-for="group in cityList" :key="group.label" :label="group.label">
        <el-option
          v-for="item in group.options"
          :key="item.value"
          :label="item.label"
          :value="item"
        ></el-option>
      </el-option-group>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityList: [
        {
          label: "热门城市",
          options: [
            {
              value: "Shanghai",
              label: "上海",
            },
            {
              value: "Beijing",
              label: "北京",
            },
          ],
        },
        {
          label: "城市名",
          options: [
            {
              value: "Chengdu",
              label: "成都",
            },
            {
              value: "Shenzhen",
              label: "深圳",
            },
            {
              value: "Guangzhou",
              label: "广州",
            },
          ],
        },
      ],
      bindValue: "",
    };
  },
  watch: {
    bindValue(newValue, oldValue) {
      console.log({ newValue });
      console.log({ oldValue });
    },
  },
};
</script>

